<template>
	<div class="information">
		<template v-if="!getIslogin">
			<view>
				<notLogin />
			</view>
		</template>
		<template v-else>
			<seacrhHeader @searchclick="selectTime" />
			<view class="top-menu-view">
				<template v-if="getUserType ==='worker'">
					<view class="menu-topic-view" v-for="item in workertabs" :id="'tabNum' + item.id" :key="item.id">
						<view @click="swichMenu(item.id)"
							:class="currentTab == item.id ? 'menu-topic-act' : 'menu-topic'">
							<text class="menu-topic-text">{{ item.name }}</text>
							<view class="menu-topic-bottom">
								<view class="menu-topic-bottom-color"></view>
							</view>
						</view>
					</view>
				</template>
				<template v-if="getUserType !=='worker'">
					<view class="menu-topic-view" v-for="item in admintabs" :id="'tabNum' + item.id" :key="item.id">
						<view @click="swichMenu(item.id)"
							:class="currentTab == item.id ? 'menu-topic-act' : 'menu-topic'">
							<text class="menu-topic-text">{{ item.name }}</text>
							<view class="menu-topic-bottom">
								<view class="menu-topic-bottom-color"></view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="content">
				<view class="competion" v-show="tabCurrent == 'tabNum0' ? true : false">
					<loan :loanList="loanList" />
				</view>
				<view class="xiangmu" v-show="tabCurrent == 'tabNum1' ? true : false">
					<clock :clockList="clockList" />
				</view>
				<view class="xiangmu" v-show="tabCurrent == 'tabNum2' ? true : false">
					<examine :auditList="auditList" />
				</view>
				<view class="xiangmu" v-show="tabCurrent == 'tabNum3' ? true : false">
					<nopunchCard :noPunchCard="noPunchCardList" />
				</view>
			</view>
		</template>


	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import loan from './common/loan.vue'
	import clock from './common/clock.vue'
	import examine from './admin/examine.vue'
	import nopunchCard from '@/pages/record/admin/noPunchCard.vue'
	import seacrhHeader from '@/components/seacrhHeader/index.vue'
	import notLogin from '@/components/notLogin/index.vue'
	export default {
		data() {
			return {
				tabCurrent: "tabNum0",
				//user
				loanList: [],
				clockList: [],
				auditList: [],
				noPunchCardList: [],
				currentTab: 0,
				form: {
					start: "",
					end: "",
				},
				workertabs: [{
						id: 0,
						name: "借款",
					},
					{
						id: 1,
						name: "打卡",
					},
				],
				admintabs: [{
						id: 0,
						name: "借款",
					},
					{
						id: 1,
						name: "打卡",
					},
					{
						id: 2,
						name: "审核",
					},
					{
						id: 3,
						name: "未打卡",
					},
				],
			};
		},
		components: {
			loan,
			clock,
			examine,
			seacrhHeader,
			nopunchCard,
			notLogin
		},
		computed: {
			...mapGetters(["getUserType", "getIslogin"]),
		},
		methods: {
			//user
			selectTime(time) {
				this.form.start = time[0]
				this.form.end = time[1]
				this.reFresh(this.currentTab)
			},
			swichMenu(id) {
				this.currentTab = id;
				this.tabCurrent = "tabNum" + id;
				this.reFresh(id)
			},
			reFresh(id) {
				switch (id) {
					case 0:
						this.getLoan()
						break;
					case 1:
						this.getclock()
						break;
					case 2:
						this.getexamine()
						break;
					case 3:
						this.getexamine()
						break;

				}
			},
			getTodayMinus30Days() {
				const today = new Date(); // 获取当前日期
				const thirtyDaysAgo = new Date(today); // 复制当前日期

				// 计算并设置日期为前30天的日期
				thirtyDaysAgo.setDate(today.getDate() - 30);

				return this.formatDate(thirtyDaysAgo);
			},
			getTodayDate() {
				const today = new Date(); // 获取当前日期
				return this.formatDate(today);
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1并补零
				const day = String(date.getDate()).padStart(2, '0'); // 补零操作

				return `${year}-${month}-${day}`;
			},
			async getexamine() {
				if (!this.form.start || !this.form.end) {
					this.form.start = this.getTodayMinus30Days()
					this.form.end = this.getTodayDate()
				}
				const data = {
					...this.form
				}
				try {
					const result = await this.$request.request({
						url: this.$api.getAuditList,
						data,
						header: this.$aplsjsonheader,
						method: 'GET',
						isToast: true
					});
					console.log(result, 154);
					this.auditList = result.auditList || []
					this.noPunchCardList = result.noPunchCard || []
					console.log(this.noPunchCardList, 182);
				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
			},
			async getclock() {
				if (!this.form.start || !this.form.end) {
					this.form.start = this.getTodayMinus30Days()
					this.form.end = this.getTodayDate()
				}
				const data = {
					...this.form
				}
				try {
					const result = await this.$request.request({
						url: this.$api.getPunchCard,
						data,
						header: this.$aplsjsonheader,
						method: 'GET',
						isToast: true
					});
					this.clockList = result || []
				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
			},
			async getLoan() {
				if (!this.form.start || !this.form.end) {
					this.form.start = this.getTodayMinus30Days()
					this.form.end = this.getTodayDate()
				}
				const data = {
					...this.form
				}
				console.log(data, 202);
				try {
					const result = await this.$request.request({
						url: this.$api.getBorrow,
						data,
						header: this.$aplsjsonheader,
						method: 'GET',
					});
					this.loanList = result || []
				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
			}

			//admin
		},
		onLoad() {
			// this.getLoan()
		},
	};
</script>

<style lang="less">
	.information {
		background-color: #fdfdfd;
		height: auto;
		min-height: 100%;
		padding-bottom: 20rpx;

		.popup {
			height: 100rpx;
		}

		.warp {
			padding: 10px;
		}

		.button {
			margin-bottom: 10px;
		}

		.popup {
			height: 100rpx;
		}

		.top-menu-view {
			display: flex;
			white-space: nowrap;
			width: 100%;
			background-color: #ffffff;
			height: 86rpx;
			line-height: 86rpx;

			.menu-topic-view {
				display: inline-block;
				white-space: nowrap;
				height: 86rpx;
				position: relative;
				width: 50%;

				.menu-topic-text {
					font-size: 30rpx;
					color: #303133;
					padding: 10rpx 40rpx;
					text-align: center;
					display: block;
				}

				.menu-topic-bottom {
					position: absolute;
					bottom: 0;
					width: 100%;

					.menu-topic-bottom-color {
						width: 40rpx;
						height: 4rpx;
					}
				}

				.menu-topic-act .menu-topic-bottom {
					display: flex;
					justify-content: center;
				}

				.menu-topic-act .menu-topic-bottom-color {
					background: #3d7eff;
				}
			}
		}

		.tab {
			height: 80rpx;

			.xiangmu {
				width: 150rpx;
				height: 100%;
				background-color: red;
				display: inline-block;
			}

			.tabBox {
				width: 150rpx;
				height: 100%;
				background-color: green;
				display: inline-block;
			}
		}
	}
</style>
